<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"  href="http://localhost:8080/picture/statics/layui/css/layui.css" media="all">
    <script src="http://localhost:8080/picture/statics/layui/layui.all.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <!--列表展示页面布局 start-->
    <div class="layui-row">
        <!--数据表格-->
        <div class="layui-col-md10" style="width: 80%;padding-left: 10px;">
            <table class="layui-hide" id="demo" lay-filter="test" style="margin-left: 50px;"></table>
        </div>
        <div class="layui-col-md2">
            <!--查询条件面板-->
            <div style="padding: 20px; background-color: #F2F2F2;margin-top: 10px;">
                <div class="layui-card">
                    <div class="layui-card-header">查询条件</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item" >
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入角色ID" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-item" >
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入角色状态" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-item" >
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-btn-container">
                            <button type="button" class="layui-btn" style="margin-left: 30px;">筛选</button>
                            <button type="button" class="layui-btn layui-btn-warm">重置</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--帮助面板-->
            <div style="padding: 20px; background-color: #F2F2F2;">
                <div class="layui-card">
                    <div class="layui-card-header">帮助</div>
                    <div class="layui-card-body">
                        查询不到角色怎么办？<br>
                        条件输入错误?
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end-->
    <!--table工具头设置 start-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">单笔新增</button>
            <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
            <!--<button class="layui-btn layui-btn-sm" lay-event="isAll">批量删除</button>-->
        </div>
    </script>
    <!--end-->
    <!--行数据操作设置 start-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-lg  layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-lg  layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-lg layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--end-->
    <!-- 表单弹窗 -->
    <script type="text/html" id="modelUser">
        <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form" action="http://localhost:8080/picture/role/addRole">
            <!--<div class="layui-col-md11">-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">ID</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="text" name="id" required  lay-verify="required" placeholder="请输入id" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <div class="layui-col-md11">
                <div class="layui-form-item" style="margin-top: 14px;">
                    <label class="layui-form-label">角色代码</label>
                    <div class="layui-input-block">
                        <input type="text" name="roleCode" value='' required  lay-verify="required" placeholder="请输入角色代码" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-col-md11">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="roleName" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-col-md11">
                <div class="layui-form-item">
                    <label class="layui-form-label">age</label>
                    <div class="layui-input-block">
                        <input type="text" name="status" required  lay-verify="required" placeholder="请输入角色状态" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <!--调整按钮位置-->
            <div class="layui-row">
                <div class="layui-col-md4"><!--4/12--></div>
                <div class="layui-col-md4 layui-col-md-offset4">
                    <div class="layui-form-item text-right">
                        <!--<button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>-->
                        <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit style="margin-left: 286px;">保存</button>
                    </div>
                </div>
            </div>

        </form>
     </script>
    <!--add by-yanybq-数据表格表单元素-start-->
    <!--详细用法参考layui模板引擎：-->
    <!--d.status(获取到该列的数据，将其转换为模板数据)-->
    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="lock" value="{{d.status}}}" title="锁定" lay-filter="lockDemo" {{ d.status == 1 ? 'checked' : '' }}>
    </script>
    <!--add by-yanybq-数据表格表单元素-start-->
</body>
</html>
<script>
    layui.use(['layer','table','jquery','form'], function(){
        var layer = layui.layer;
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        table.render({
            elem: '#demo'
            ,url:'http://localhost:8080/picture/role/selectrole'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,height:733
            ,width:1150
            ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,page:true //开启分页
            ,cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'roleId', width:200,height:50, title: '角色ID', sort: true,fixed: 'left'}
                ,{field:'roleCode', width:250,height:50,  title: '角色代码',fixed: 'left'}
                ,{field:'roleName', width:250, height:50, title: '角色名称'}
                ,{field:'status', width:110, height:150, title: '角色状态',fixed:'right',templet: '#switchTpl'}
                ,{fixed: 'right', width: 170, height:50, title: '操作', align:'center', toolbar: '#barDemo',fixed:'right'}
            ]]
        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function(obj){

            console.log("sd" + obj.status);
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'getCheckData':
                    //用户信息录入
                    console.log("角色信息录入");
                    layer.open({
                        type: 1,
                        title:  '添加用户角色',
                        content: $('#modelUser').html(),
                        area:['600px','550px'],
                        closeBtn:1,
                        shade:[0.8, '#393D49'],
                        success: function(index, layero){
                            //do something
                            form.on('submit(modelSubmitUser)', function (data) {
                                layer.close(index);
                                return false;
                            });
                            // layer.close(index);//如果设定了yes回调，需进行手工关闭
                        },
                    });
                    break;
                // case 'update':
                //     if(data.length === 0){
                //         layer.msg('请选择一行');
                //     } else if(data.length > 1){
                //         layer.msg('只能同时编辑一个');
                //     } else {
                //         layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                //     }
                //     break;
                case 'isAll':
                    if(data.length === 0){
                        layer.msg('亲！至少选择一行数据呦ヾ(•ω•`。)');
                    } else {
                        // layer.msg('删除');
                       // console.log("选中的数据为：====》 " + JSON.stringify(data));
                        var idUnion = '';
                        for(var i=0; i<data.length;i++){
                            idUnion =  idUnion + data[i].id + "#";
                        }
                        console.log("联合主键===》 " + idUnion);
                        $.ajax({
                            type:'POST',
                            dataType:'json',
                            async:true,
                            url:'http://localhost:8080/picture/items/deleteuserbyunionid',
                            data:{
                                "idUnion" : idUnion
                            },
                            success:function (data) {
                                console.log("返回数据：" + data.msg);
                                layer.alert(data.msg,{icon:1});
                                obj.del();
                            },
                            error:function (data) {
                                layer.alert(data.msg,{icon:5});
                            }
                        });
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                console.log("用户详细信息===》 " +  JSON.stringify(data));
                layer.open({
                    type: 2,
                    title:  '查看详情',
                    content: 'http://localhost:8080/picture/role/roledetail',
                    area:['600px','550px'],
                    closeBtn:1,
                    shade:[0.8, '#393D49'],
                    success: function(layero, index){//弹出后回调
                        var body = layer.getChildFrame('body', index);
                        //获取content的窗口
                        var iframeWin = $(layero).find('iframe')[0].contentWindow;
                        //console.log("asdfasd" + iframeWin);
                        //body.find("#id").val(data.id);
                        body.find("#roleCode").val(data.roleCode);
                        body.find("#roleName").val(data.roleName);
                        body.find("#status").val(data.status);
                    }
                });

            } else if(layEvent === 'del'){
                layer.confirm('确定要删除这条数据吗?(ﾉ´▽｀)ﾉ♪', function(index){
                    layer.close(index);
                    //执行删除操作
                    console.log("获取到的行数据为===》 " +  JSON.stringify(data));
                    $.ajax({
                        type:'POST',
                        dataType:'json',
                        async:true,
                        url:'http://localhost:8080/picture/role/deleterole',
                        data:{
                            'roleId':data.roleId
                        },
                        success:function (data) {
                            console.log("返回数据：" + data.msg);
                            layer.alert(data.msg,{icon:1});
                            obj.del(); //删除对应行（tr）的DOM结构
                        },
                        error:function (data) {
                            console.log("错误信息" + data.msg);
                        }
                    });
                });
            } else if(layEvent === 'edit'){
                // layer.msg('编辑操作');
                console.log("编辑用户信息" + JSON.stringify(data));
                layer.open({
                    type: 2,
                    title:  '修改用户信息',
                    content: 'http://localhost:8080/picture/role/rolemodify',
                    area:['600px','550px'],
                    closeBtn:1,
                    shade:[0.8, '#393D49'],
                    success: function(layero, index){//弹出后回调
                        var body = layer.getChildFrame('body', index);
                        //获取content的窗口
                        var iframeWin = $(layero).find('iframe')[0].contentWindow;
                        //console.log("asdfasd" + iframeWin);
                        body.find("#id").val(data.id);
                        body.find("#username").val(data.username);
                        body.find("#password").val(data.password);
                        body.find("#age").val(data.age);
                        body.find("#email").val(data.email);
                        body.find("#area").val(data.area);
                        body.find("#roleId").val(data.roleId);
                        body.find("#status").val(data.status);
                        body.find("#idcard").val(data.idcard);
                    }
                });
            }
        });

    });
</script>